
.preloader {
    margin: 0 auto;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -10px;
    .disc {
        display: block;
        float: left;
        border-radius: 20px;
        width: 12px;
        height: 12px;
        margin: 2px;
        background: #dbe6ec;
        overflow:hidden;
        -webkit-mask-image: url();
        div {
            width: 12px;
            height: 12px;
            background: white;
            position: relative;
            margin-top: -12px;
            -webkit-animation: discmove 1.75s infinite;
            border-radius: 20px;
        }
    }
    .blue div {
        background: #12dccc;
    }

}



.red div {
  background: #fa5e5b;
  -webkit-animation-delay: 0.25s;
}

.green div {
  background: #1ac571;
  -webkit-animation-delay: 0.5s;
}

.orange div {
  background: #ffa337;
  -webkit-animation-delay: 0.75s;
}

@-webkit-keyframes discmove {
  0% {
    -webkit-transform: translate(0px,0px);
  }
  
  40% {
    -webkit-transform: translate(0px,12px);
  }
  
  80% {
    -webkit-transform: translate(0px,24px);
  }
  
  100% {
    -webkit-transform: translate(0px,24px);
  }
}